<template>
  <Header/>
  <div class="container">
    <el-aside class="sidebar" width="150px">
      <el-menu
          class="menu"
          default-active="1"
          :router="true"
          :collapse-transition="false"
      >
        <el-menu-item-group >
          <el-menu-item
              v-for="college in colleges"
              :key="college.id"
              :index="college.id.toString()"
          >
            {{ college.name }}
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </el-aside>
    <div class="content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
import { ElMenu, ElMenuItem} from 'element-plus';
import Header from "../../components/Header.vue";
export default {
  name: "Interview",
  components: {
    Header,
    ElMenu,
    ElMenuItem,
  },
  data(){
    return {
      activeMenuItem: '', // 当前选中的菜单项
      colleges: [//el-icon-school后期考虑换成别的东西
        { id: 1, name: '机械工程学院', icon: 'el-icon-school' },
        { id: 2, name: '管理学院', icon: 'el-icon-school' },
        { id: 3, name: '电子信息学院', icon: 'el-icon-school' },
        { id: 4, name: '计算机学院', icon: 'el-icon-school' },
        { id: 5, name: '自动化学院', icon: 'el-icon-school' },
        { id: 6, name: '理学院', icon: 'el-icon-school' },
        { id: 7, name: '通信工程学院', icon: 'el-icon-school' },
        { id: 8, name: '人艺数法学院', icon: 'el-icon-school' },
        { id: 9, name: '经济学院', icon: 'el-icon-school' },
        { id: 10, name: '管理学院', icon: 'el-icon-school' },
        { id: 11, name: '会计学院', icon: 'el-icon-school' },
        { id: 12, name: '网安学院', icon: 'el-icon-school' },
        { id: 13, name: '卓越学院', icon: 'el-icon-school' },
        { id: 14, name: '外国语学院', icon: 'el-icon-school' },
        { id: 15, name: '材环学院', icon: 'el-icon-school' },

        // 其他学院...
      ],
    }
  }
}
</script>

<style scoped>

.container {
  display: flex;
  height: 100vh;
}

.sidebar {
  background-color: #f8f9fa;
}

.menu {
  padding-top: 20px;
}

.content {
  flex: 1;
  padding: 20px;
}
</style>